import React, { useRef } from 'react'
import { Card, Row, Col, Button, Input } from 'antd'
import View from '@/components/View'
import ReactToPrint from 'react-to-print'
import PrintTable from './table'
import './print.scss'

const handleA = () => {
  return <Button type="primary">打印</Button>
}

const defaultTxt = `虞美人·春花秋月何时了 -- 李煜 
春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流。`


const ToastDemo = () => {
  const componentRef = useRef(null)
  const printBRef = useRef(null)
  const hidePrint = useRef(null)
  const showPrint = useRef(null)


  return (
    <View className="app-at">
      <Card title="打印 Print">
        <h3>这是打印功能的演示</h3>
        <Row>
          <Col span={1}></Col>
          <Col span={21}>
            <ol>
              <li>
                <p>默认打印table中的内容</p>
                <div>
                  <p>
                    <ReactToPrint trigger={handleA} content={() => componentRef.current} />
                  </p>
                  <div ref={componentRef}>
                    <PrintTable />
                  </div>
                </div>
              </li>
              <li>
                <p>控制打印样式</p>
                <div>
                  <p>
                    <ReactToPrint trigger={handleA} content={() => printBRef.current} />
                  </p>
                  <div ref={printBRef}>
                    <Input.TextArea
                      className="print-target-page"
                      style={{ width: '100%', height: '250px', marginBottom: '20px' }}
                      value={defaultTxt}
                    />
                  </div>
                </div>
              </li>
              <li>
                <p>打印时隐藏不需要的内容</p>
                <div>
                  <p>
                    <ReactToPrint trigger={handleA} content={() => hidePrint.current} />
                  </p>
                  <div className="demo-hide-print" ref={hidePrint}>
                    <div className="print-hide">打印时隐藏</div>
                    <div>这里是需要打印的内容</div>
                  </div>
                </div>
                <p></p>
              </li>
              <li>
                <p>打印时增加新的内容</p>
                <div>
                  <p>
                    <ReactToPrint trigger={handleA} content={() => showPrint.current} />
                  </p>
                  <div className="demo-hide-print" ref={showPrint}>
                    <div className="print-show">打印时多出来的内容显示</div>
                    <div>这里是需要打印的内容222</div>
                  </div>
                </div>
              </li>
            </ol>
          </Col>
        </Row>
      </Card>
    </View>
  )
}

export default ToastDemo
